<template>
  <!-- 项目管理：内容目录 -->
  <el-row :class="device==='mobile'?'mobileMenuPart':'menuPart'">
    <el-col :span="8">
      <header>
        目录结构
        <el-button size="mini" @click="addMenu" style="float: right;padding: 6px 15px;margin: 2px 0;">新增</el-button>
      </header>
      <el-input placeholder="输入关键字进行过滤" v-model="searchInfo" style="margin:8px auto;" />
      <el-tree ref="menuTree" :data="menuList" empty-text="暂无数据" :filter-node-method="filterNode"
          node-key="cateCode" :props="defaultProps" @node-click="chooseMenu" style="height:calc(100% - 94px);"></el-tree>
    </el-col>
    <el-col :span="16">
      <header>目录信息<span style="margin-left:10px;" v-show="!chosenMenu">【新增目录项】</span></header>
      <el-form ref="menuForm" :rules="rules" :model="menuForm" label-width="100px">
        <!-- <el-form-item label="目录编号" prop="cateCode">
          <el-input v-model="menuForm.cateCode" placeholder="请输入目录编号" />
        </el-form-item> -->
        <el-form-item label="目录名称" prop="cateName">
          <el-input maxlength="200" v-model="menuForm.cateName" placeholder="请输入目录名称" />
        </el-form-item>
        <el-form-item label="上级目录" prop="parentId">
          <el-popover placement="bottom" width="215" trigger="click" v-model="parentVisible">
            <el-tree ref="parentTree" :data="menuList" empty-text="暂无数据" style="max-height:300px;"
                     node-key="cateCode" :props="defaultProps" @node-click="chooseParentMenu"></el-tree>
            <el-button slot="reference" style="width:215px;text-align:center;">{{chosenParentMenu?chosenParentMenu:"暂无上级目录"}}</el-button>
          </el-popover>
        </el-form-item>
        <!-- <el-form-item label="目录类型" prop="cateType">
          <el-select v-model="menuForm.cateType" placeholder="请选择">
            <el-option value="" label="--请选择--"></el-option>
            <el-option value="1" label="无需填写内容"></el-option>
            <el-option value="2" label="需填写内容"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="排序" prop="sortNum">
          <el-input type="number" v-model="menuForm.sortNum" placeholder="请输入排序"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="saveMenu">保存</el-button>
          <el-button type="danger" size="mini" @click="deleteMenu">删除</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { Loading } from 'element-ui';
  import { listContMenu, saveContMenu, deleteContMenu } from "@/api/project/contentMenu";
  import { formatData } from '@/api/common/common';
  export default {
    name: 'ContentMenu',
    data(){
      return {
        projectId:"",
        chosenMenu:"",
        searchInfo:"",
        defaultProps:{
          label: 'cateName',
          children: 'children'
        },
        menuList:[],
        parentVisible:false,
        chosenParentMenu:"",  // 上级目录名称
        menuForm:{
          cateId:"",
          cateCode:"",
          cateName:"",
          parentId:0,
          cateType:"1",
          cateLevel:null,
          sortNum:1
        },
        rules: {
          cateCode: [{required: true, message: '请输入目录编号', trigger: 'blur'}],
          cateName: [{required: true, message: '请输入目录名称', trigger: 'blur'}],
          cateType: [{required: true, message: '请选择目录类型', trigger: 'change'}],
          cateLevel: [{required: true, message: '请输入目录级别', trigger: 'blur'}],
          sortNum: [{required: true, message: '请输入目录排序', trigger: 'blur'}]
        },
      }
    },
    computed: {
      ...mapGetters([ 'device' ])
    },
    watch:{
      searchInfo(val) {
        console.log(val);
        this.$refs.menuTree.filter(val);
      }
    },
    methods:{
      // 获取目录列表
      getMenuList(projectId){
        if(projectId) this.projectId = projectId;
        listContMenu({
          projectId:this.projectId
        }).then(ret=>{
          if(ret.code == 200){
            this.menuList = formatData(ret.rows, 0);
          }else{
            this.$message.error(ret.msg);
          }
        })
        .catch(err=>{
          console.log(err);
        })
      },

      // 选定目录
      chooseMenu(obj, isChecked, hasCheckedChildren){
        console.log(obj)
        console.log(isChecked)
        this.chosenMenu = obj.cateName;
        this.chosenParentMenu = isChecked.parent.data.cateName;
        this.$refs.menuForm.resetFields();
        this.menuForm = {
          cateId:obj.cateId,
          cateCode:obj.cateCode,
          cateName:obj.cateName,
          parentId:obj.parentId,
          cateType:obj.cateType,
          cateLevel:obj.cateLevel,
          sortNum:obj.sortNum
        };
      },

      // 条件过滤
      filterNode(value, data) {
        if (!value) return true;
        return data.cateName.indexOf(value) !== -1;
      },

      // 选择上级目录
      chooseParentMenu(obj, isChecked, hasCheckedChildren){
        this.chosenParentMenu = obj.cateName;
        this.menuForm.parentId = obj.cateCode;
        this.menuForm.cateLevel = Number(obj.cateLevel) + 1;
        this.parentVisible = false;
      },

      // 新增
      addMenu(){
        this.chosenMenu = "";
        this.chosenParentMenu = "";
        this.$refs.menuForm.resetFields();
        this.menuForm = {
          cateId:"",
          cateCode:"",
          cateName:"",
          parentId:0,
          cateType:"1",
          cateLevel:null,
          sortNum:1
        }
      },

      // 保存信息
      saveMenu() {
        this.$refs.menuForm.validate((valid) => {
          if(valid){
            let loadingInstance = Loading.service({ fullscreen: true, background:"rgba(0,0,0,0.5)" });
            let params = this.menuForm;
            if(!params.cateId) params.projectId = this.projectId;
            if(!params.cateLevel) params.cateLevel = 1;
            console.log(params);

            saveContMenu(params).then(ret=>{
              loadingInstance.close();
              if(ret.code == 200){
                this.$message.success("保存成功！");
                this.chosenMenu = "";
                this.chosenParentMenu = "";
                this.$refs.menuForm.resetFields();
                this.menuForm = {
                  cateId:"",
                  cateCode:"",
                  cateName:"",
                  parentId:0,
                  cateType:"1",
                  cateLevel:null,
                  sortNum:1
                };
                setTimeout(() => {
                  this.getMenuList();
                  this.$emit("getStructureList");
                }, 10);
              }else{
                this.$message.error(ret.msg);
              }
            }).catch(err=>{
              console.log(err);
              loadingInstance.close();
            })
          }else{
            return false;
          }
        });
      },

      // 删除
      deleteMenu(){
        if(!this.chosenMenu){
          this.$message.warning("您还未选择要删除的目录");
          return false;
        }
        if(this.menuForm.cateCode == "doc_name"){
          this.$message.warning("文档标题不可删除，请选择其他目录");
          return false;
        }
        this.$confirm("您确定要删除已选中的目录？！", "提示", {
          confirmButtonText:"删除",
          cancelButtonText:"取消",
          type:"warning"
        }).then(()=>{
          deleteContMenu(this.menuForm.cateId).then(ret=>{
            if(ret.code == 200){
              this.$message.success("删除成功！");
              this.chosenMenu = "";
              this.chosenParentMenu = "";
              this.$refs.menuForm.resetFields();
              this.menuForm = {
                cateId:"",
                cateCode:"",
                cateName:"",
                parentId:0,
                cateType:"1",
                cateLevel:null,
                sortNum:1
              };
              this.getMenuList();
              this.$emit("getStructureList");
            }else{
              this.$message.error(ret.msg);
            }
          }).catch(err=>{
            console.log(err);
          })
        }).catch(()=>{})
      },
    }
  }
</script>

<style lang="scss" scoped>
  .menuPart{
    width:100%;
    height:540px;
    .el-col{
      height:100%;
      text-align:center;
      border:1px solid #CCC;

      &:first-child{
        width:calc(33.33% - 5px);
        margin-right:5px;
      }
      &:last-child{
        width:calc(66.67% - 5px);
        margin-left:5px;
      }
    }
  }
  .mobileMenuPart{
    width:100%;
    .el-col{
      width:100%;
      text-align:center;
      border:1px solid #CCC;
      
      &:first-child{
        height:200px;
        margin-bottom:10px;
      }
      &:last-child{
        height:calc(100% - 210px);
      }
    }
  }
  .el-row .el-col header{
    width:100%;
    height:30px;
    line-height:30px;
    text-align:left;
    padding:0 5px;
    border-bottom:1px solid #F2F2F2;
  }
  .el-tree{
    overflow: auto;
    margin-bottom:10px;
  }
  .el-form{
    background-color:#FFF;
    padding:8px;
    margin-bottom: 10px;
    text-align:left;
  }
  .el-form-item{text-align:left;}
  .el-input{width:215px;}
</style>
